<template>
	<!--地图详细页-->
	<view class="page-content">
		<!-- 标题栏和状态栏占位符 -->
		<view class="titleNview-placing"></view>
		<view class="page-top">
			<image class="t-logo" src="/static/index/logo.png"></image>
			<view class="page-top-r" @click="add">
				<image class="icon_img" :src="icon_img"></image>
				<view class="page-top-r-txt">{{datalist.address}}</view>
			</view>
		</view>
		<view class="page-section">
			<!--可增加功能：
            1、当前已走到的图标可换成头像，
            2、已走过的地方改变名称颜色subkey="key"
			longitude 中心经度
			latitude 中心纬度 :hidden="showtip"
			-->
			<map style="width: 100%; height: 100%;" :polyline="datalist.polyline"
				:latitude="datalist.latitude" :longitude="datalist.longitude" min-scale="3" max-scale="20" scale="15"
				enable-zoom="true" :markers="datalist.markers" show-location="true" layer-style="1"
				@markertap="markertap">
			</map>
		</view>

		<!-- 弹窗 -->
		<w-popup :show="showtip" :type="type1" @change="change1">
			<view class="w-tip">
				<view class="w-box">
					<image class="w-box-img" src="/static/404.png"></image>
					<view class="w-con">
						<view class="w-con-t">
							<view>益气健身房</view>
							<view class="w-con-t-num">239m</view>
						</view>
						<view class="w-con-c">湖里区吕玲路211号</view>
						<view class="w-con-b">
							<view class="w-con-b-l">设备数:19</view>
							<view class="w-con-b-r">
								<!-- <view class="icondt icons icon-area" @click="address"></view> -->
								<image class="icondt" src="/static/icon/icon-pho.png" @click="address"></image>
								<image class="icondt" src="/static/icon/icon-map.png" @click="address"></image>
								<!-- <view class="icondt icons icon-area" @click="address"></view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</w-popup>
	</view>
</template>

<script>
	import wPopup from '@/components/w-popup/w-popup2.vue'
	//接口
	import {
		getGameMapInfos, //获取赛事地图坐标点及坐标点信息
	} from '@/common/api.js'
	export default {
		components: {
			wPopup
		},
		data() {
			return {
				icon_img: '/static/icon/icon-address.png', //地址图标
				list: [],
				datalist: {
					address: '观音山',
					polyline: [], //路线
					latitude: 24.504015, //中心维度
					longitude: 118.177742, //中心经度
					markers: [{
						date: "2021/05/10 09:34",
						distance: "5533.73m",
						id: 16,
						width: 50,
						height: 58,
						img: "https://cys.swy666.cn/storage/uploads/20210508/b18e6762c57a794a24190977073fdc5e.png",
						lat: "24.47117340380357",
						lng: "118.12943900851538",
						name: "建发大厦",
						sign: "start",
						site: "start",
						status: 1
					}, {
						date: "2021/05/10 09:41",
						distance: "10.12km",
						id: 18,
						width: 50,
						height: 58,
						img: "https://cys.swy666.cn/storage/uploads/20210510/c6680c25714b60dbc20e0488f1103a6d.jpg",
						lat: "24.46224602438014",
						lng: "118.18077700203436",
						name: "986523",
						sign: "",
						site: "",
						status: 1
					}, {
						date: "",
						distance: "9533.06m",
						id: 17,
						width: 50,
						height: 58,
						img: "",
						lat: "24.46579822628414",
						lng: "118.1739858123812",
						name: "12456",
						sign: "end",
						site: "end",
						status: 2
					}], //标记点
				},
				showtip: false, //是否显示弹窗1
				content1: '顶部弹 popup',
				type1: '', //弹窗显示方式
				markers: {
					name: 'asdasd ',
					status: 1,
					distance: '',
					latitude: 24.504015,
					longitude: 2118.177742
				},
				game_id: '', //传参
			}
		},
		onLoad(option) {
			console.log(33333, option)
			var that = this;
			var amapFile = require('../../gaodemap/amap-wx.js');
			var amapPlugin = new amapFile.AMapWX({
				key: "e980a7ec33ce4e1befd80c4697673c3a"
			});
			if (option.game_id) {
				this.game_id = option.game_id;
			}
			this.getLocation();
		},
		methods: {
			//获取位置
			getLocation() {
				let _self = this;
				let ress = [{
					date: "2021/05/10 09:34",
					distance: "5533.73m",
					id: 16,
					img: "https://cys.swy666.cn/storage/uploads/20210508/b18e6762c57a794a24190977073fdc5e.png",
					lat: "24.47117340380357",
					lng: "118.12943900851538",
					name: "建发大厦",
					sign: "start",
					site: "start",
					status: 1
				}, {
					date: "2021/05/10 09:41",
					distance: "10.12km",
					id: 18,
					img: "https://cys.swy666.cn/storage/uploads/20210510/c6680c25714b60dbc20e0488f1103a6d.jpg",
					lat: "24.46224602438014",
					lng: "118.18077700203436",
					name: "986523",
					sign: "",
					site: "",
					status: 1
				}, {
					date: "",
					distance: "9533.06m",
					id: 17,
					img: "",
					lat: "24.46579822628414",
					lng: "118.1739858123812",
					name: "12456",
					sign: "end",
					site: "end",
					status: 2
				}]
				if (ress.length > 0) {
					let resdata = ress;
					let markers = [];
					ress.forEach(item => {
						let marker = {
							id: 0,
							width: 50,
							height: 58,
							latitude: 24.504015,
							longitude: 118.177742,
							status: 0, //坐标完成情况，1.已完成，2.未完成
							name: '', //坐标名称
							site: '', //start 则是开始，如果为end 则是结束，如果为空，则是中间点
							date: '',
							distance: '', //距离坐标还有多少米 
							iconPath: '/static/icon/icon-add.png',

						}
						marker.id = item.id;
						marker.date = item.date;
						marker.distance = item.distance;
						marker.site = item.site;
						marker.latitude = item.lat;
						marker.longitude = item.lng;
						marker.status = item.status;
						marker.name = item.name;
						markers.push(marker);
					})
					_self.datalist.markers = markers;
				}


				/* uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						_self.datalist.latitude = res.latitude;
						_self.datalist.longitude = res.longitude;
						let objdata = {
							game_id: _self.game_id,
							lat: res.latitude,
							lng: res.longitude
						}
						getGameMapInfos(objdata).then(res => {
							console.log(3333, res)
							if (res.code === 2000) {
								if (res.data.length > 0) {
									let resdata = res.data;
									let markers = [];
									res.data.forEach(item => {
										let marker = {
											id: 0,
											width: 44,
											height: 51,
											latitude: 24.504015,
											longitude: 118.177742,
											status:0, //坐标完成情况，1.已完成，2.未完成
											name:'', //坐标名称
											site:'', //start 则是开始，如果为end 则是结束，如果为空，则是中间点
											date:'',
											distance :'', //距离坐标还有多少米 
											iconPath: '/static/clockIn/clock.png',
										
										}
										marker.id = item.id;
										marker.date = item.date;
										marker.distance = item.distance;
										if(item.site === 'start' && item.status === 2){
											marker.iconPath = '/static/clockIn/origin.png';
										}else if(item.site === 'start' && item.status === 1){
											marker.iconPath = '/static/clockIn/origin_on.png';
										}else if(item.site === 'end' && item.status === 2){
											marker.iconPath = '/static/clockIn/des.png';
										}else if(item.site === 'end' && item.status === 1){
											marker.iconPath = '/static/clockIn/des_on.png';
										}else if(item.site === '' && item.status === 2){
											marker.iconPath = '/static/clockIn/clock.png';
										}else if(item.site === '' && item.status === 1){
											marker.iconPath = '/static/clockIn/clock_on.png';
										}
										marker.site = item.site;
										marker.latitude = item.lat;
										marker.longitude = item.lng;
										marker.status = item.status;
										marker.name = item.name;
										markers.push(marker);
									})
									_self.datalist.markers = markers;
								}
							}
						})
						
					}
				}); */

			},
			add() {
				this.content1 = 'center';
				this.type1 = 'bottom';
				this.showtip = true;
			},
			change1(e) {
				if (!e.show) {
					this.showtip = false;
				}
			},
			//取消
			cancel(type) {
				this.showtip = false
			},
			//当前位置
			address() {
				let _self = this;
				uni.openLocation({
					latitude: _self.datalist.latitude,
					longitude: _self.datalist.longitude,
					success: function() {
						console.log('success');
					}
				});
			},
			markertap(e) {
				this.content1 = 'center';
				this.type1 = 'bottom';
				this.showtip = true;
				
				
				console.log(2222, e.detail.markerId)
				if (this.datalist.markers && this.datalist.markers.length > 0) {
					this.datalist.markers.forEach(item => {

						if (item.id === e.detail.markerId) {
							console.log(2223, item.id)
							this.markers.name = item.name;
							this.markers.status = item.status;
							this.markers.distance = item.distance;
							this.markers.latitude = item.latitude;
							this.markers.longitude = item.longitude;
						}
					})
					// #ifdef APP-PLUS
					let objdata = {
					img: '/static/404.png',
					name: '益气健身房',
					address: '湖里区吕玲路211号',
					num: '19',
					phone: '17700084288',
					distance: '239'
				}
					uni.navigateTo({
						url: '/pages/popup/popup?objdata='+ JSON.stringify(objdata)
					})
					// #endif
					// #ifndef APP-PLUS
					this.content1 = 'center';
					this.type1 = 'bottom';
					this.showtip = true;
					// #endif
					/* this.content1 = 'center';
					this.type1 = 'bottom';
					this.showtip = true; */
				}
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style lang="scss" scoped>
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	//头部
	.page-top {
		display: flex;
		height: 88rpx;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		background: $uni-bg-color;

		.t-logo {
			width: 239rpx;
			height: 40rpx;
		}

		.page-top-r {
			width: 300rpx;
			text-align: right;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.icon_img {
				width: 21rpx;
				height: 29rpx;
				margin-right: 12rpx;
			}

			.page-top-r-txt {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 28rpx;
				font-weight: 400;
				color: $font-color-d;
			}
		}
	}

	.sign_no {
		background-color: #eee;
		color: #333;
	}

	.sign_on {
		background-color: #02BB6F;
		color: #fff;
	}

	.fc_green {
		font-size: 26rpx;
		color: #02BB6F;
	}

	.page-content {
		/* display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
		margin: 0 auto; */
		width: 100vw;
		height: 100%;
		background: $uni-bg-color;
		color: $font-color-w;

		.page-section {
			position: fixed;
			z-index: 1;
			display: flex;
			height: 100vh;
			width: 100vw;
		}


	}

	/* 提示窗口 */
	.w-tip {
		display: flex;
		flex-direction: column;
		width: 90vw;
		min-height: 230rpx;
		border-radius: 20rpx;
		background-color: $uni-bg-box-color;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		padding: 30rpx;
		margin: 30rpx auto 130rpx;

		.w-box {
			display: flex;
			color: $font-color-w;

			.w-con {
				width: calc(100% - 190rpx);
				display: flex;
				flex-direction: column;

				.w-con-t {
					display: flex;
					justify-content: space-between;
					font-size: 32rpx;
					font-weight: 400;
					line-height: 60rpx;
					color: $font-color-w;

					.w-con-t-num {
						font-size: 26rpx;
						font-weight: 400;
						line-height: 42rpx;
						color: $font-color-d;
					}
				}

				.w-con-c {
					font-size: 26rpx;
					font-weight: 400;
					line-height: 42rpx;
					color: $font-color-d;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.w-con-b {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.w-con-b-l {
						font-size: 26rpx;
						font-weight: 400;
						line-height: 42rpx;
						color: $font-color-d;
					}

					.w-con-b-r {
						display: flex;

						.icondt {
							margin-left: 50rpx;
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}
		}

		.w-box-img {
			width: 156rpx;
			height: 156rpx;
			border-radius: 10rpx;
			overflow: hidden;
			margin-right: 30rpx;
		}
	}

</style>
